<route lang="json5">
	{
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '讨论组',
	enablePullDownRefresh: false,
	"app-plus": {
	"bounce": "none"
	}
	},
	}
</route>
<template>
	<view class="page">
		<NavBar>
			<template v-slot:left>
				<text class="iconfont icon-fanhui back"></text>
			</template>
			<template v-slot:title>
				讨论组信息
			</template>
			<template v-slot:right>
				<text v-if="!editable" class="iconfont icon-bianji" @click="editHandle"></text>
				<text v-else @click="editHandle">取消</text>
			</template>
		</NavBar>
		<view class="body">
			<view class="info">
				<view class="row">
					<text class="label">群聊名称</text>
					<th-input v-if="editable" v-model:value="chatInfo.chatName" style="width:100%;" placeholder="讨论组名称"
						clearable></th-input>
					<text v-else class="value">{{chatInfo.chatName}}</text>
				</view>
				<view class="row">
					<text class="label">备注</text>
					<th-input v-if="editable" v-model:value="chatInfo.remark" placeholder="讨论组名称" style="width:100%;"
						clearable></th-input>
					<text v-else class="value">{{chatInfo.remark}}</text>
				</view>
			</view>
			<view class="user-list">
				<view class="item" v-for="(item,index) in chatInfo.userList" :key="item.id">
					<text>{{item.userName}} <text v-if="chatInfo.createBy === item.userCode">(创建人)</text></text>
					<text v-if="editable && chatInfo.createBy === username && item.userCode !== username" class="iconfont icon-jianqu" @click="delUser(item,index)"></text>
				</view>
			</view>
			<view class="add-user" @click="selectUserShow = true">增加成员</view>
			<view v-if="editable" class="bot-btn">
				<thButton type="primary" size="flex" @click="saveHandle">保存</thButton>
			</view>
		</view>
		<leaguerPicker :show="selectUserShow" :filtration="true" :checked="selectList" :returnDeptName="true"
			@hideModal="hideModal" @checkLeaguer="checkLeaguer"></leaguerPicker>
	</view>
</template>

<script setup lang="ts">
	import NavBar from './components/navBar.vue'
	import { getGroupChatById, addGroupUser, removeGroupUser, updateGroupChat } from '@/service/chat'
	import thInput from '@/pages/pm/assay-report/component/th-input.vue';
	import thButton from '@/pages/pm/assay-report/component/th-button.vue';
	const chatInfo = ref({
		chatName: '',
		remark: '',
		userList: []
	});

	const editable = ref(false);
	const editHandle = () => {
		if (editable.value) {
			editable.value = false;
			getChatInfo();
		} else {
			editable.value = true;
		}
	}

	const delUser = (user, index) => {
		removeGroupUser({ id: user.chatId, userList: [{ userCode: user.userCode }] }).then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: "移除成功"
				})
				chatInfo.value.userList.splice(index, 1);
				uni.$emit('resetList', chatInfo.value);
			}
		});
	}

	const selectList = ref([]);
	const selectUserShow = ref(false);

	const hideModal = () => {
		selectUserShow.value = false;
	};

	const checkLeaguer = (e) => {
		const codeList = chatInfo.value.userList.map(user => user.userCode);
		e.forEach(user => {
			if (!codeList.includes(user.personCode)) {
				chatInfo.value.userList.push({
					userName: user.personName,
					userCode: user.personCode
				})
			}
		})
		selectList.value = []

		const data = { ...chatInfo.value };
		// data.userList = data.userList
		//   .map((user) => {
		//     return {
		//       userCode: user,
		//     };
		//   });
		addGroupUser(data).then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '新增成功'
				})
				uni.$emit('resetList', chatInfo.value);
				// getGroupChatById(state.activeChat.id).then((res) => {
				//   state.activeChat = res.data;
				// });
			}
		});
	};

	const saveHandle = () => {
		uni.showLoading({
			title: '正在保存',
			mask: true
		})
		updateGroupChat(chatInfo.value).then(res => {
			if (res.code === 0) {
				uni.showToast({
					title: '保存成功'
				})
				editable.value = false;
				uni.$emit('resetName', chatInfo.value.chatName);
				uni.$emit('resetList', chatInfo.value);
				return;
			}
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			})
		}).catch(err => {
			uni.showToast({
				title: '保存失败',
				icon: 'none'
			})
		}).finally(() => {
			uni.hideLoading();
		})
	}

	const chatId = ref('');
	const getChatInfo = () => {
		getGroupChatById(chatId.value).then(res => {
			if (res.code === 0) {
				chatInfo.value = res.data;
			}
		})
	}

	const username = ref('');
	onLoad((options) => {
		chatId.value = options.chatId;

		const user = JSON.parse(uni.getStorageSync('app_userCode'));
		username.value = user.value;

		getChatInfo()
	});
</script>

<style lang="scss" scoped>
	@import url('@/static/iconfont/iconfont.css');

	.page {
		height: 100vh;
		display: flex;
		font-size: 32rpx;
		flex-direction: column;
		background: #f1f1f1;
	}

	.user-list {
		padding: 0 30rpx;
		background: #fff;

		max-height:calc(100vh - 500rpx);
		overflow-y: auto;
		.item {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1rpx solid #f1f1f1;
			display: flex;
			justify-content: space-between;

			&:last-child {
				border: none
			}

			;
		}
	}

	.info {
		background: #fff;
		padding: 0 30rpx;
		margin-bottom: 15rpx;

		.row {
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f1f1f1;

			&:last-child {
				border: none;
			}

			.label {
				letter-spacing: 2rpx;
				min-width: 5em;
			}

			.value {
				flex: 1;
				margin-left: 30rpx;

				.iconfont {
					margin-left: 15rpx;
					font-size: 30rpx;
				}
			}
		}
	}

	.add-user {
		border: 1rpx dashed #bfbfbf;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #fff;
		margin-top: 15rpx;
		color: #333;
	}

	.bot-btn {
		position: fixed;
		bottom: 0;
		margin: 15rpx;
		left: 0;
		right: 0;
	}

	.icon-fanhui,
	.icon-bianji {
		font-size: 42rpx !important;
	}
</style>